<?php
/*
  Template Name: index
 */
?>

<?php
get_header();
?>

<div class="container clearfix">

    <div class="rightCol">
        <span class="openRM"><span></span></span>
        <div class="rightMenu">
            <span class="closeRM"><span></span></span>
            <h6>أذهب سريعا</h6>
            <a href="#">المقالات الاسبوعيه</a>
            <a href="#">جدول الدورى</a>
            <a href="#">تلفيزيون التحرير</a>
            <a href="#">لعبة سودوكو</a>
            <a href="#">لعبة تك تاك تو</a>
            <a href="#">الكلامات المتقطعة</a>
            <a href="#">مقال رئيس التحربر</a>
        </div><!-- rightMenu -->

        <div class="sliderkit photoslider-1click">
            <div class="sliderkit-nav">
                <div class="sliderkit-nav-clip">
                    <ul>
                        <?php
                        $mainNavId = get_cat_ID('main nav');
                        $theArgs = array('child_of' => $mainNavId, 'orderby' => 'id');
                        $navCats = get_categories($theArgs);
                        $newsCatId = get_cat_ID('news');
                        $featuredCat = get_cat_ID('featured');
                        $counter = 1;
                        $tempContainer = array();
                        foreach ($navCats as $navCat) {
                            $curCatId = get_cat_ID($navCat->name);
                            $args = array('category__and' => array($curCatId, $newsCatId, $featuredCat), 'numberposts' => 1);
                            $innerPost = get_posts($args);
                            if (empty($innerPost)) {
                                continue;
                            }
                            $innerPost = $innerPost[0];
                            $colorClassName = 'c' . $navCat->slug;
                            $finalPath = get_the_post_thumbnail($innerPost->ID);
                            $tempContainer[] = array('colorClassName' => $colorClassName, 'imagePath' => $finalPath, 'postTitle' => $innerPost->post_title, 'catName' => $navCat->name, 'postLink' => get_permalink($innerPost->ID));
                            ?>
                            <li class="<?php echo $colorClassName ?>">
                                <a href="#"><span><?php echo $counter ?></span></a>
                                <div class="sliderkiNavHover">
                                    <div class="sliderInNew">
                                        <?php echo $finalPath; ?>
                                        <h4><?php echo $innerPost->post_title; ?></h4>
                                    </div><!-- sliderInNew -->
                                </div><!-- sliderKitNavHover -->
                            </li>
                            <?php
                            $counter++;
                        }
                        ?>
                    </ul>
                </div><!-- sliderkit-nav-clip -->
            </div><!-- sliderkit-nav -->
            <div class="sliderkit-panels">
                <?php foreach ($tempContainer as $curInfo) { ?>
                    <div class="sliderkit-panel <?php echo $curInfo['colorClassName'] ?>">
                        <a href="#" class="quickRead"> قراءة سريعه </a>
                        <a href="<?php echo $curInfo['postLink'] ?>"><?php echo $curInfo['imagePath'] ?></a>
                        <div class="panelContent">
                            <h3><a href="<?php echo $curInfo['postLink'] ?>"><?php echo $curInfo['postTitle'] ?></a></h3>
                            <div class="panelAbout">
                                <a href="<?php $curInfo['catLink'] ?>" class="panelNewSection"><?php echo $curInfo['catName'] ?></a>
                                <span class="panelNewShares">
                                    <span class="Mybg"></span>
                                    <span> </span><a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode($curInfo['postLink']) ?>" target="_blank">مشاركة</a>
                                </span>
                            </div><!-- panelAbout -->
                        </div><!-- panelContent -->
                    </div><!-- sliderkit-panel -->
                <?php } ?>
            </div><!-- sliderkit-panels -->
        </div><!-- sliderkit -->

        <div class="homeadvsLeaderBoard"><img src="<?php bloginfo('template_url'); ?>/images/leaderBoard.jpg" alt="" /></div>

        <div class="sectionsArea">
            <div class="sectionsAreaCategories clearfix">
                <h2>مختارتنا لك <span><?php echo getChosenLastUpdatedTime(); ?></span></h2>
                <ul>
                    <?php
                    foreach ($navCats as $navCat) {
                        $colorClassName = 'c' . $navCat->slug;
                        ?>
                        <li class="<?php echo $colorClassName ?> section-act">
                            <a href="#" class="load-chosen" sec="<?php echo $navCat->term_id ?>"><?php echo $navCat->name ?></a>
                            <div class="up-triangle"></div>
                        </li>
                    <?php } ?>
                    <li class="notSection">
                        <a href="#" class="load-chosen" sec="0" id="load-chosen-all">الكــــــل</a>
                    </li>
                </ul>
            </div><!-- sectionsAreaCategories -->

            <div class="sectionNewsArea clearfix" id="section-content">

            </div><!-- sectionNewsArea -->

            <a href="#" class="seeMoreFromSection load-chosen" style="display: none;" id="load-more"> شاهد المزيد </a>
        </div><!-- sectionsArea -->

        <div class="importantVideos">
            <h2> فيديوهات لازم تشوفها </h2>
            <a href="#" class="fullScreenVideo" style="display: none;">شاهد بكامل الشاشة</a>

            <div id="carousel-demo1" class="sliderkit carousel-demo1">
                <div class="sliderkit-nav">
                    <div class="sliderkit-nav-clip">
                        <ul>
                            <?php
                            $videoCatId = get_cat_ID('videos');
                            $args = array('category' => $videoCatId, 'numberposts' => 4);
                            $videoPosts = get_posts($args);
                            foreach ($videoPosts as $video) {
                                $videoURL = $video->post_content;
                                ?>
                                <li>
                                    <iframe width="465" height="235"
                                            src="<?php echo getVideoEmbedURL($videoURL); ?>">
                                    </iframe>
                                </li>
                            <?php }
                            ?>
                        </ul>
                    </div>
                    <div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-prev"><a href="#" title="Scroll to the left"><span>Previous</span></a></div>
                    <div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-next"><a href="#" title="Scroll to the right"><span>Next</span></a></div>
                </div>
            </div><!-- sliderkit -->

        </div><!-- importantVideos -->

        <div class="homeGamesArea clearfix">
            <div class="OneGame">
                <div class="playGame">
                    <h2>ألعب سودوكو</h2>
                    <a href="#"> ألعب الأن </a>
                </div>
                <img src="<?php bloginfo('template_url'); ?>/images/sudoko.jpg" alt="" />
            </div><!-- oneGame -->
            <div class="OneGame f-l">
                <div class="playGame">
                    <h2>ألعب تك تاك تووو</h2>
                    <a href="#"> ألعب الأن </a>
                </div>
                <img src="<?php bloginfo('template_url'); ?>/images/ticTacToc.jpg" alt="" />
            </div><!-- oneGame -->
        </div><!-- homeGames -->

        <div class="homePhotoGalleries">
            <div class="sectionsAreaCategories clearfix">
                <h2>البومات الصور</h2>
                <ul>
                    <?php
                    $albumCatId = get_cat_ID('album');
                    $albums = get_posts(array('category' => $albumCatId));
                    $counter = 1;
                    foreach ($albums as $key => $post) {
                        $colorCategory = getColorClassName($post);
                        $colorClass = 'c' . $colorCategory->slug;
                        if ($key === 0) {
//                            $activeClass = ' active';
                            $firstId = "id='first-album'";
                        } else {
//                            $activeClass = '';
                            $firstId = '';
                        }
                        ?>
                        <li class="<?php echo $colorClass; ?> album-act">
                            <a href="#" class="fetch-album" pid="<?php echo $post->ID; ?>" <?php echo $firstId ?>><?php echo $post->post_title; ?></a>
                            <div class="up-triangle"></div>
                        </li>
                        <?php
//                        $counter++;
                    }
                    ?>                                                   
                </ul>
            </div><!-- sectionsAreaCategories -->

            <div class="photoAlbums" id="album-container" style="display: none;">

            </div><!-- photoAlbums -->
        </div><!-- homePhotoGalleries -->

    </div><!-- rightCol -->

    <div class="sideBar"> 

        <div class="importantNewsArea">
            <ul class="importantNewsTab clearfix">
                <li class="active">
                    <h2><a href="#theLatestNews">أحدث الأخبار</a></h2>
                    <div class="up-triangle"></div>
                </li>
                <li>
                    <h2><a href="#mostViews">الأخبار الأكثر أنتشارا</a></h2>
                    <div class="up-triangle"></div>
                </li>   
            </ul>

            <div class="importantNewsPosts" id="theLatestNews">
                <div class="scroll-pane">
                    <ul>
                        <?php
                        $newsCatId = get_cat_ID('news');
                        $posts = get_posts(array('category' => $newsCatId, 'numberposts' => 8));
                        $counter = 1;
                        foreach ($posts as $post) {
                            $colorCategory = getColorClassName($post);
                            $colorClassName = 'c' . $colorCategory->slug;
                            ?>
                            <li class="<?php echo $colorClassName; ?>">
                                <span><?php echo $counter; ?></span>
                                <h3><a href="#"><?php echo $post->post_title; ?></a></h3>
                            </li>
                            <?php
                            $counter++;
                        }
                        ?>
                    </ul>
                </div><!-- scroll-pane -->
            </div><!-- importantNewsPosts -->

            <div class="importantNewsPosts" id="mostViews">
                <div class="scroll-pane">
                    <ul>
                        <?php
                        $query = new WP_Query(array('cat' => $newsCatId, 'numberposts' => 8, 'meta_key' => '_count-views_all', 'orderby' => 'meta_value_num'));
                        while ($query->have_posts()) {
                            $query->the_post();
                            $colorCategory = getColorClassName(get_the_ID());
                            $colorClassName = 'c' . $colorCategory->slug;
                            $meta_values = get_post_meta(get_the_ID(), '_count-views_all', TRUE);
                            ?>
                            <li class="<?php echo $colorClassName; ?>">
                                <span><?php echo $meta_values; ?></span>
                                <h3><a href="<?php the_permalink(); ?>"><?php echo substr(get_the_title(), 0, 250); ?></a></h3>
                            </li>
                            <?php
                        }
                        wp_reset_postdata();
                        ?>
                    </ul>
                </div><!-- scroll-pane -->
            </div><!-- importantNewsPosts -->

        </div><!-- imprtantNewsArea -->
        <?php get_sidebar(); ?>
    </div><!-- sideBar -->

</div><!-- container -->
<?php get_footer(); ?>